layui.use(['form', 'jquery', 'layer'], function () {
    var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
    var $ = layui.$;
    var layer = layui.layer;
    form.render("select");

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

// 柱形图样式配置
    var labelOption = {
        show: true,
        position: "insideBottom",
        distance: 15,
        align: 'left',
        verticalAlign: 'middle',
        rotate: 90,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {
                textBorderColor: '#fff'
            }
        }
    };

    // 柱形图数据
    option = {
        title: {
            text: '一年内所有散装油销售记录'
        },
        tooltip: {////触发类型；轴触发，item则鼠标hover到折线点显示相应数据，
            trigger: 'axis'
        },
        color: [],

        legend: {
            data: []
        },

        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: []
    };

    // 使用指定的配置项和数据显示图表。
    myChart.setOption(option);

    form.on('select(filter)', function (data) {
        load(data);
    });

    function load(data) {
        myChart.setOption(option, true);
        var colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple'];

        $.ajax({
            url: "/threshold/getEchartData",
            type: "post",
            data: {"year": data.value},
            dataType: "json",
            success: function (result) {
                if (result.code == 0) {

                    var names = new Array;
                    for (var i = 0; i < result.data.length; i++) {
                        names.push(result.data[i].name);
                    }

                    var datas = new Array();
                    for (var i = 0; i < result.data.length; i++) {
                        var seriesData = {
                            name: result.data[i].name,
                            type: 'bar',
                            barGap: 0,
                            label: labelOption,
                            data: result.data[i].data
                        };
                        datas.push(seriesData);
                    }

                    $.ajax({
                        url: "/petrolStationType/warningValue",
                        type: "get",
                        dataType: "json",
                        success: function (result) {
                            if (result.code == 0) {

                                var warningData = new Array();
                                for (var i = 1; i <= 12; i++) {
                                    warningData.push(result.data.psThreshold);
                                }

                                var warningLine = {
                                    name: '警戒线',
                                    type: 'line',
                                    data: warningData
                                };

                                datas.push(warningLine);

                                var color2 = new Array();
                                for(var i=0;i<datas.length;i++){
                                    color2.push(colors[Math.floor(Math.random()*7)]);
                                }
                                refreshData(names, datas,color2);//自定义刷新的时候调用
                            }
                        }
                    });

                }
            }
        });
    }

    function refreshData(names, data,color) {
        //刷新数据
        var option = myChart.getOption();
        option.legend.data = names;
        option.series = data;
        option.color = color;
        myChart.setOption(option);
    }

    layer.ready(function () {
        var data = {
            value: $("option:selected").val()
        };
        load(data);
    });
});
